<template>
  <!-- <div class="view_container"></div> -->
  <div class="view_warpper">
    <div id="allmap"></div>
    <div class="view_container">
      <a-button type="primary" shape="circle" @click="handleShow">
        <template #icon>
          <SearchOutlined :style="{ fontSize: '45px' }" />
        </template>
      </a-button>

      <template v-if="show">
        <a-button type="primary" shape="circle" @click="handleGift">
          <template #icon>
            <!-- <GiftOutlined /> -->
            <GiftOutlined :style="{ fontSize: '30px' }" />
          </template>
        </a-button>

        <a-button type="primary" shape="circle" @click="handleCamera">
          <template #icon>
            <!-- <CameraOutlined /> -->
            <CameraOutlined :style="{ fontSize: '15px' }" />
          </template>
        </a-button>
      </template>
    </div>
  </div>
</template>
<script lang="ts">
import { BMapGL } from '@/env';
import { Image } from '@/store/pick/types';
import {
  CameraOutlined,
  GiftOutlined,
  SearchOutlined,
} from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import { computed, defineComponent, onMounted, ref, watch } from 'vue';

export default defineComponent({
  components: { SearchOutlined, CameraOutlined, GiftOutlined },
  props: {
    lng: { type: Number, required: true },
    lat: { type: Number, required: true },
    getLoaction: { type: Function, required: true },
    show: { type: Boolean, required: true },
    list: { type: Object, required: true },
  },
  emits: ['handleShow', 'handleGift', 'handleCamera'],
  setup(props, { emit }) {
    const bmap = ref<BMapGL>();
    // 初始化
    const newIcon = new window.BMapGL.Icon(
      'markers.png',
      new window.BMapGL.Size(23, 23),
      {
        // anchor: new window.BMapGL.Size(10, 25),
        // https://igoutu.cn/icons/set/loca
      },
    );

    const mylist = computed(() => props.list as Image[]);
    onMounted(async () => {
      bmap.value = new window.BMapGL.Map('allmap'); // 创建Map实例

      console.log(props.lng);
      if (!bmap.value) {
        message.warn('网页加载出错，请刷新重试');
        return;
      }

      bmap.value.centerAndZoom(
        new window.BMapGL.Point(props.lng, props.lat),
        19,
      ); // 初始化地图,设置中心点坐标和地图级别
      bmap.value.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
      bmap.value.setHeading(64.5);
      bmap.value.setTilt(73);

      for (const item of mylist.value) {
        const point = new window.BMapGL.Point(item.lng, item.lat);

        const marker = new window.BMapGL.Marker(point, { icon: newIcon });
        bmap.value.addOverlay(marker);
      }

      const people = new window.BMapGL.Marker(
        new window.BMapGL.Point(props.lng, props.lat),
      ); // 创建点
      bmap.value.addOverlay(people);
    });

    // 监听
    watch(
      [() => props.lng, () => props.lat, () => props.list],
      () => {
        if (!bmap.value) return;
        bmap.value.centerAndZoom(
          new window.BMapGL.Point(props.lng, props.lat),
          19,
        );
        // bmap.value.setHeading(64.5);
        // bmap.value.setTilt(73);

        for (const item of mylist.value) {
          const point = new window.BMapGL.Point(item.lng, item.lat);

          const marker = new window.BMapGL.Marker(point, { icon: newIcon });

          bmap.value.addOverlay(marker);
        }

        const people = new window.BMapGL.Marker(
          new window.BMapGL.Point(props.lng, props.lat),
        ); // 创建点
        bmap.value.addOverlay(people);
      },
      { immediate: true },
    );

    const handleShow = () => {
      // console.log('handleShow');
      emit('handleShow', props.show);
    };

    const handleGift = () => {
      emit('handleGift');
    };
    const handleCamera = () => {
      emit('handleCamera');
    };
    return { bmap, handleShow, handleGift, handleCamera };
  },
});
</script>
<style lang="less" scoped>
#allmap {
  width: 100vw;
  height: 100vh;
  // position: relative;
  z-index: 1;
}
.view_warpper {
  position: relative;
}
.view_container {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  position: absolute;
  bottom: 20px;
  left: calc(50% - 37.5px);
  z-index: 2;
  button:nth-child(1) {
    width: 75px;
    height: 75px;
  }
  button:nth-child(2) {
    width: 60px;
    height: 60px;
  }
  button:nth-child(3) {
    width: 45px;
    height: 45px;
  }
}
</style>
